<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { UploadFilled } from '@element-plus/icons-vue'
onMounted(() => {
});
let agentData = ref([
  { country: '', optional: "", agents: 5 },
])
const addAgentRow = () => {
  agentData.value.push(
    { country: '', optional: "", agents: 5 }
  )
}
const deletAgentRow = (index) => {
  agentData.value.splice(index, 1)
}
let shipmentModeChecked = ref("FCL")
const shipmentMode = ref(["FCL", "Warehousing", "LCL", "Break Bulk", "Air", "Rail", "Land", "Intermodal"])
let checkedMode = (item) => {
  shipmentModeChecked.value = item
}
let deliverCargoFrom = ref("")
let deliverCargoTo = ref("")

let cargoTypeChecked = ref("General Cargo")
const cargoTypeData = ref(["General Cargo", "Project Cargo", "Dangerous Goods", "E-commerce Cargo", "Reefer Cargo", "Personal Cargo", "Special cargo", "Others"])
let checkedCargoType = (item) => {
  cargoTypeChecked.value = item
}

let commodity = ref("")
let cargoReadyTime = ref("")

let containerData = ref([
  { type: '', quantity: 0, },
])
const addContainerRow = () => {
  containerData.value.push(
    { type: '', quantity: 0 }
  )
}
const deletContainerRow = (index) => {
  containerData.value.splice(index, 1)
}

let quantityData = ref([
  { quantity: '', packings: 'Bulk', weight: '', weightUnite: 'KG', volume: '', volumeUnite: 'CBM' },
])
const addQuantityRow = () => {
  quantityData.value.push(
    { quantity: '', packings: 'Bulk', weight: '', weightUnite: 'KG', volume: '', volumeUnite: 'CBM' },
  )
}
const deletQuantityRow = (index) => {
  quantityData.value.splice(index, 1)
}
let freightTerm = ref("")
const incoterms = ref("")
const targetPrice =ref("")
let freightOther = ref("")

let remark = ref("")
</script>
<template>
  <div class="inquiry-wrap">
    <el-form class="look-agent" ref="AgentFormRef">
      <div class="input-wrap">
        <!-- Look for Agent in -->
        <div class="flex align-center row-pub agent-data" v-for="(item, index) in agentData" :key="index">
          <span class="del" @click="deletAgentRow(index)" v-if="agentData.length !== 1 && index <= 4">×</span>
          <el-row :gutter="20" class="agent-row pub">
            <el-col :span="8">
              <el-form-item label="Look for Agent in" prop="item.country">
                <el-select placeholder="Please select a target country/region" v-model="item.country">
                  <el-option label="shanghai" value="shanghai" />
                  <el-option label="beijing" value="beijing" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label=" " prop="item.optional">
                <el-input placeholder="Please select target country (optional)" v-model="item.optional" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="Need" prop="item.agents">
                <el-select class="need-select" placeholder="Please select need" v-model="item.agents">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                  <el-option label="3" value="3" />
                  <el-option label="4" value="4" />
                  <el-option label="5" value="5" />
                  <el-option label="6" value="6" />
                  <el-option label="7" value="7" />
                </el-select>
                <span>Agent(s) or Vendor(s)</span>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="handle-wrap flex align-center justify-center">
            <span class="add" @click="addAgentRow"
              v-if="index === agentData.length - 1 && agentData.length < 5">+</span>
          </div>
        </div>
        <!-- Shipment Mode -->
        <el-row :gutter="20" class="shipment-mode">
          <el-col :span="24">
            <el-form-item label="Shipment Mode" prop="shipmentModeChecked">
              <el-radio-group v-model="shipmentModeChecked">
                <el-radio :value="item" size="large" border v-for="(item, index) in shipmentMode" :key="item"
                  @click="checkedMode(item)">{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- Deliver Cargo from -->
        <el-row :gutter="20" class="from-to">
          <el-col :span="12">
            <el-form-item label="Deliver Cargo from" prop="deliverCargoFrom">
              <el-input v-model="deliverCargoFrom" placeholder="Please select the destination city/port/girport"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="To" prop="deliverCargoTo">
              <el-input v-model="deliverCargoTo" placeholder="Please select the destination city/port/airport" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- Cargo Type -->
        <el-row :gutter="20" class="cargo-type">
          <el-col :span="24">
            <el-form-item label="Cargo Type" prop="cargoTypeChecked">
              <el-radio-group v-model="cargoTypeChecked">
                <el-radio :value="item" size="large" border v-for="(item, index) in cargoTypeData" :key="item"
                  @click="checkedCargoType(item)">{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- Commodity Cargo Ready Time-->
        <el-row :gutter="20" class="Commodity-time">
          <el-col :span="12">
            <el-form-item label="Commodity" prop="shipmentModeChecked">
              <el-input v-model="commodity" placeholder="Please enter commodity" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Cargo Ready Time" prop="shipmentModeChecked">
              <el-date-picker v-model="cargoReadyTime" type="date" placeholder="Please select the Cargo Ready Time"
                style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- Container Type & Quantity -->
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="flex align-center row-pub container-data" v-for="(item, index) in containerData" :key="index">
              <span class="del" @click="deletContainerRow(index)"
                v-if="containerData.length !== 1 && index <= 2">×</span>
              <el-row :gutter="20" class="container-row pub">
                <el-col :span="24">
                  <el-form-item label="Container Type & Quantity" prop="item.type">
                    <el-select v-model="item.type" placeholder="Please select container type">
                      <el-option label="20GP" value="20GP" />
                      <el-option label="40GP" value="40GP" />
                      <el-option label="40HQ" value="40HQ" />
                      <el-option label="45HQ" value="45HQ" />
                      <el-option label="Reefer Container" value="Reefer Container" />
                      <el-option label="Open Top Container" value="Open Top Container" />
                      <el-option label="Flat Rack Container" value="Flat Rack Container" />
                      <el-option label="Tank" value="Tank" />
                      <el-option label="Hanger Container" value="Hanger Container" />
                      <el-option label="Others" value="Others" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="item.quantity" class="mt16">
                    <el-input v-model="item.quantity" placeholder="Quantity" />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="handle-wrap flex align-center justify-center">
                <span class="add" @click="addContainerRow"
                  v-if="index === containerData.length - 1 && containerData.length < 3">+</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex align-center row-pub quantity-data" v-for="(item, index) in quantityData" :key="index">
              <span class="del" @click="deletQuantityRow(index)" v-if="quantityData.length !== 1 && index <= 2">×</span>
              <el-row :gutter="20" class="container-row pub">
                <el-row :gutter="13">
                  <el-col :span="12">
                    <el-form-item label="Quantity" prop="item.quantity" class="">
                      <el-input v-model="item.quantity" placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="Packings" prop="item.packings">
                      <el-select v-model="item.packings" placeholder="Please select container type">
                        <el-option label="Bulk" value="Bulk" />
                        <el-option label="Cartons" value="Cartons" />
                        <el-option label="Bags" value="Bags" />
                        <el-option label="Wooden Frames" value="Wooden Frames" />
                        <el-option label="Baskets" value="Baskets" />
                        <el-option label="Pallet" value="Pallet" />
                        <el-option label="Binding" value="Binding" />
                        <el-option label="Barrels" value="Barrels" />
                        <el-option label="Others" value="Others" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="13">
                  <el-col :span="12">
                    <el-form-item label="Weight (singleton)" prop="item.weight" class="width110px">
                      <el-input v-model="item.weight" placeholder="" />
                    </el-form-item>
                    <el-form-item label="" prop="item.weightUnite" class="mt16 width110px">
                      <el-select v-model="item.weightUnite" placeholder="">
                        <el-option label="KG" value="KG" />
                        <el-option label="T" value="T" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="Volume (singleton)" prop="item.volume" class="width110px">
                      <el-input v-model="item.volume" placeholder="" />
                    </el-form-item>
                    <el-form-item label="" prop="item.volumeUnite" class="mt16 width110px">
                      <el-input v-model="item.volumeUnite" placeholder="" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-row>
              <div class="handle-wrap flex align-center justify-center">
                <span class="add" @click="addQuantityRow"
                  v-if="index === quantityData.length - 1 && quantityData.length < 3">+</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- Freight Term Incoterms Target Price -->
        <el-row :gutter="20" class="from-to">
          <el-col :span="6">
            <el-form-item label="Freight Term" prop="freightTerm">
              <el-select v-model="freightTerm" placeholder="Please select">
                <el-option label="Prepaid" value="Prepaid" />
                <el-option label="Collect" value="Collect" />
                <el-option label="Prepaid at" value="Prepaid at" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Incoterms" prop="incoterms">
              <el-select v-model="incoterms" placeholder="Please select">
                <el-option label="EXW" value="EXW" />
                <el-option label="FCA" value="FCA" />
                <el-option label="CPT" value="CPT" />
                <el-option label="CIP" value="CIP" />
                <el-option label="DPU" value="DPU" />
                <el-option label="DAP" value="DAP" />
                <el-option label="DDP" value="DDP" />
                <el-option label="FAS" value="FAS" />
                <el-option label="FOB" value="FOB" />
                <el-option label="CFR" value="CFR" />
                <el-option label="CIF" value="CIF" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Target Price" prop="targetPrice">
              <el-select v-model="targetPrice" placeholder="Currency">
                <el-option label="USD" value="USD" />
                <el-option label="CNY" value="CNY" />
                <el-option label="EUR" value="EUR" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label=" " prop="freightOther">
              <el-input v-model="freightOther" placeholder="Please enter" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- Remark -->
        <el-row :gutter="9" class="remark">
          <el-col :span="21">
            <el-form-item label="Remark" prop="Remark">
              <el-input v-model="remark" type="textarea"
                placeholder="In order to ensure the security of your information, do not enter your contact information in the remarks. If the contact information appears in the remarks, the system will blur the contact information in the remarks." />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <div class="upload-file">
              <div class="upload-box">
                <el-upload class="upload-demo" drag
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
                  <div style="text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 4px;">
                    <img class="upload-img" src="@/assets/images/upload.png" alt="">
                    <div class="upload-text">
                      Support JPG, JEPG, PNG,and BMP
                    </div>
                  </div>
                </el-upload>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.inquiry-wrap {
  .input-wrap {
    .pub {
      width: calc(100% - 64px);
      background: #F5F5F5;
      margin: 0px !important;
    }

    .agent-row {
      height: 134px;
      padding: 24px 0px 0px 20px;
    }

    .agent-data {
      .handle-wrap {
        width: 62px;
        height: 134px;
        background: #E9E9E9;
      }
    }

    .container-data,
    .quantity-data {
      .handle-wrap {
        width: 62px;
        height: 226px;
        background: #E9E9E9;
      }
    }

    .container-row {
      height: 226px;
      padding: 24px 20px 0px 20px
    }

    .del,
    .add {
      width: 35px;
      height: 35px;
      border: 1px solid #333;
      border-radius: 50%;
      display: flex;
      font-size: 26px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }

  :deep(.el-form) {
    .el-row {
      margin: 25px 0px 0px 0px;

      .el-col {
        border-radius: 0px;

        .el-form-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-bottom: 0px;

          .el-form-item__label {
            font-weight: bold;
            font-size: 16px;
            display: block;
            margin: 0px 0px 16px 0px;
            line-height: 17px;
            height: 17px;
            white-space: nowrap !important;
          }

          .el-select__wrapper,
          .el-input__wrapper {
            height: 50px;
          }

          .need-select {
            width: 196px;
            margin: 0px 10px 0px 0px;
          }
        }
      }
    }

    .shipment-mode,
    .cargo-type {
      .el-radio-group {
        align-items: center;
        display: inline-flex;
        flex-wrap: wrap;
        font-size: 0;

        .el-radio {
          width: 185px !important;
          height: 50px;
          border-radius: 4px;
          color: #333 !important;
          display: flex;
          flex-direction: row-reverse;
          justify-content: space-between;
          margin: 0px 15px 15px 0px;

          &.is-checked {
            border-color: #5B108E !important;

            .el-radio__label {
              color: #5B108E;
            }

            .el-radio__inner {
              background: transparent;
              background-image: url("@/assets/images/checked.png");
              background-size: 14px 14px;
              border: none;

              &::after {
                display: none; //隐藏小圆点
              }
            }
          }
        }
      }
    }

    .quantity-data {

      // Quantity和Packings部分部分样式，特殊处理
      .el-row {
        margin: 0px;
        width: 100%;

        .el-col {
          width: 50%;
          display: flex;

          .el-form-item {
            .el-form-item__label {
              margin: 0px;
            }
          }

          .width110px {
            width: 110px;

            &:nth-child(odd) {
              margin-right: 8px;
            }
          }
        }
      }
    }

    .remark {
      .el-textarea {
        .el-textarea__inner {
          height: 177px;
        }
      }

      .upload-file,
      .el-upload-dragger {
        width: 161px;
        height: 177px;
        background: #EFEFEF;
        border-radius: 4px;
        margin: 33px 0px 0px 0px;
      }

      .upload-file {
        margin: 33px 0px 0px 0px;

        .upload-img {
          width: 39px;
          height: 39px;
        }

        .upload-text {
          font-size: 14px;
          color: #999999;
          text-align: center;
          margin-top: 21px;
        }
      }

      .el-upload-list {
        display: none;
      }
    }
  }
}

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.row-pub {
  margin: 0px 0px 10px 0px;
  position: relative;

  .del {
    width: 35px;
    height: 35px;
    display: flex;
    font-size: 26px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 68px;
    z-index: 1;
    border: none !important;
  }
}

.mt16 {
  margin-top: 16px;
}
</style>
